<template>
  <div class="td-doctor-me-base-info">
    <mt-cell title="我的头像">
      <span class="icon-path">
        <img v-if="loadData" :src="params.IconPath" width="100" height="100">
        <input type="file" name="IconPathFile" @change="fileChange($event,1)">
      </span>
    </mt-cell>

    <mt-field label="姓名" placeholder="请输入姓名" v-model="params.DoctorName"></mt-field>

    <mt-cell title="性别">
      <div class="mint-radio-group">
        <el-radio-group size="mini" v-model="params.Gender">
          <el-radio-button label="0">女</el-radio-button>
          <el-radio-button label="1">男</el-radio-button>
        </el-radio-group>
      </div>
    </mt-cell>

    <mt-cell
      title="挂职医院"
      :label="HospitalID.length>0?HospitalIDStr:''"
      is-link
      @click.native="showHospital=true"
    >
      <span v-if="HospitalID.length===0">请选择</span>
    </mt-cell>

    <mt-cell
      title="特长"
      :label="params.DoctorLabel?params.DoctorLabel:''"
      is-link
      @click.native="showDoctorLabel=true"
    >
      <span v-if="!params.DoctorLabel">请选择</span>
    </mt-cell>

    <mt-cell title="职称" is-link @click.native="showProfessionalTitle=true">
      <span v-if="!params.ProfessionalTitle">请选择</span>
      <span v-if="params.ProfessionalTitle">{{params.ProfessionalTitle}}</span>
    </mt-cell>

    <mt-field label="手机号" placeholder="请输入手机号" v-model="params.MobilePhone"></mt-field>

    <mt-field label="身份证号" placeholder="请输入身份证号" v-model="params.IDCard"></mt-field>

    <mt-cell title="执照" is-link>
      <span v-if="!params.LicenseImg">上传执照</span>
      <span v-if="params.LicenseImg">更新执照</span>
      <input type="file" name="LicenseImgFile" @change="fileChange($event,2)">
    </mt-cell>

    <div class="LicenseImg" v-if="params.LicenseImg">
      <img :src="params.LicenseImg">
    </div>

    <div class="btnSubmit">
      <el-button
        type="primary"
        class="td-btn-doctor-primary"
        style="width:80%;"
        round
        @click.native="btnSave();"
      >保存</el-button>
    </div>

    <!--挂职医院-->
    <mt-popup v-model="showHospital" position="bottom" class="mint-popup-box">
      <mt-header title="挂职医院">
        <mt-button slot="right" @click.native="showHospital=false">关闭</mt-button>
        <mt-button slot="left" @click.native="showHospital=false">确定</mt-button>
      </mt-header>
      <div class="list-box">
        <mt-checklist :options="hospitalList" v-model="HospitalID" @change="getHospitalID"></mt-checklist>
      </div>
    </mt-popup>
    <!--特长-->
    <mt-popup v-model="showDoctorLabel" position="bottom" class="mint-popup-box">
      <mt-header title="特长">
        <mt-button slot="right" @click.native="showDoctorLabel=false">关闭</mt-button>
        <mt-button slot="left" @click.native="showDoctorLabel=false">确定</mt-button>
      </mt-header>
      <mt-field
        placeholder="特长,多个逗号分隔"
        type="textarea"
        v-model="params.DoctorLabel"
        rows="4"
        @keyup.native="doctorLabelKeyUp"
      ></mt-field>
    </mt-popup>
    <!--职称-->
    <mt-popup v-model="showProfessionalTitle" position="bottom" class="mint-popup-box">
      <mt-header title="特长">
        <mt-button slot="right" @click.native="showProfessionalTitle=false">关闭</mt-button>
      </mt-header>
      <div class="list-box">
        <mt-radio
          :options="ProfessionalTitleList"
          @change="getProfessionalTitle"
          v-model="params.ProfessionalTitle"
        ></mt-radio>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import DoctorService from "../../../../_services/doctor.service";
import HospitalService from "../../../../_services/hospital.service";
export default {
  name: "TianDingDoctorMeBaseInfoComponent",
  data() {
    return {
      params: {
        DoctorID: 0,
        IconPath: "",
        MobilePhone: "",
        Password: "",
        DoctorName: "",
        IDCard: "",
        Gender: "0",
        ProfessionalTitle: "",
        LicenseImg: "",
        AuditStatus: 2,
        RegisterTime: "",
        LoginTime: "",
        Remark: "",
        AuditSysUserName: "",
        DoctorLabel: "",
        UserStatus: 0,
        OpenID: "",
        hospitalList: []
      },
      showHospital: false,
      hospitalList: [],
      HospitalID: [],
      HospitalIDStr: "",
      showDoctorLabel: false,
      showProfessionalTitle: false,
      ProfessionalTitleList: [
        {
          value: "主任医师",
          label: "主任医师"
        },
        {
          value: "副主任医师",
          label: "副主任医师"
        },
        {
          value: "主治医师",
          label: "主治医师"
        },
        {
          value: "住院医师",
          label: "住院医师"
        },
        {
          value: "实习医生",
          label: "实习医生"
        },
        {
          value: "医学生",
          label: "医学生"
        }
      ],
      loadData: false
    };
  },
  mounted() {
    this.params = this.utils$.dataFormat(
      JSON.parse(this.local$.getItem("tdUser"))
    );

    if (this.params.hospitalList.length > 0) {
      this.params.hospitalList.forEach(element => {
        this.HospitalID.push(element.HospitalID.toString());
      });
    }

    this.getHospitalList();

    this.loadData = true;
  },
  methods: {
    fileChange(event, type) {
      let files = event.target.files[0];
      let fileName = files.name;
      let file = /\.[^\.]+/.exec(fileName);
      let imageType = file[0].replace(".", "").toString();
      let arr = ["jpg", "png", "jpeg", "bmp"];
      if (!arr.includes(imageType)) {
        this.toast$(`图片格式不正确(${arr.toString()})`);
        return;
      }

      let reader = new FileReader();
      reader.readAsDataURL(files);
      reader.onload = e => {
        let base64 = e.target.result;
        if (type === 1) {
          this.params.IconPath = base64;
        } else {
          this.params.LicenseImg = base64;
        }
      };
    },
    getHospitalList() {
      let params = {};
      params.HospitalID = -1;
      params.PageIndex = 1;
      params.PageSize = 100;
      params.Orderby = "HospitalID";
      params.IsDesc = true;
      HospitalService.getHospitalList(params).then(response => {
        if (response.Data.Items.length > 0) {
          response.Data.Items.forEach(element => {
            let item = {
              value: element.HospitalID.toString(),
              label: element.HospitalName
            };
            this.selectgHospital();
            this.hospitalList.push(item);
          });
        }
      });
    },
    selectgHospital() {
      this.HospitalIDStr = "";
      this.hospitalList.forEach(element => {
        let include = this.HospitalID.includes(element.value);
        if (include) {
          if (this.HospitalIDStr !== "") {
            this.HospitalIDStr += " , ";
          }
          this.HospitalIDStr += element.label;
        }
      });
    },
    getHospitalID(event) {
      this.HospitalIDStr = "";
      this.hospitalList.forEach(element => {
        let include = event.includes(element.value);
        if (include) {
          if (this.HospitalIDStr !== "") {
            this.HospitalIDStr += " , ";
          }
          this.HospitalIDStr += element.label;
        }
      });
    },
    doctorLabelKeyUp(event) {
      this.params.DoctorLabel.replace(/，/g, ",");
    },
    getProfessionalTitle(event) {
      this.showProfessionalTitle = false;
    },
    btnSave() {
      let iconPath = "";
      let licenseImg = "";
      if (this.utils$.isEmpty(this.params.IconPath)) {
        if (this.params.IconPath.indexOf("http") === -1) {
          iconPath = this.utils$.removeBase64Prefix(this.params.IconPath);
        }
      }

      if (this.utils$.isEmpty(this.params.LicenseImg)) {
        if (this.params.LicenseImg.indexOf("http") === -1) {
          licenseImg = this.utils$.removeBase64Prefix(this.params.LicenseImg);
        }
      }

      if (!this.utils$.isEmpty(this.params.DoctorName)) {
        this.toast$("请输入姓名");
        return;
      }

      if (this.HospitalID.length === 0) {
        this.toast$("至少选择一个挂职医院");
        return;
      }

      if (!this.utils$.isEmpty(this.params.DoctorLabel)) {
        this.toast$("至少填写一项特长");
        return;
      }

      if (!this.utils$.isEmpty(this.params.ProfessionalTitle)) {
        this.toast$("请选择职称");
        return;
      }

      if (!this.utils$.isEmpty(this.params.MobilePhone)) {
        this.toast$("请填写手机号");
        return;
      }

      if (!this.utils$.isEmpty(this.params.IDCard)) {
        this.toast$("请填写身份证号");
        return;
      }

      this.indicator$.open("请稍后...");

      let params = {
        DoctorID: this.params.DoctorID,
        DoctorName: this.params.DoctorName,
        MobilePhone: this.params.MobilePhone,
        Password: "",
        IDCard: this.params.IDCard,
        IconPath: iconPath,
        Gender: parseInt(this.params.Gender),
        HospitalID: this.HospitalID,
        DoctorLabel: this.params.DoctorLabel,
        ProfessionalTitle: this.params.ProfessionalTitle,
        LicenseImg: licenseImg,
        AuditStatus: 0,
        UserStatus: 0,
        Remark: ""
      };

      DoctorService.updateDoctor(params).then(response => {
        if (response && response.Data > 0) {
          this.toast$("保存成功");
        } else {
          this.toast$("保存失败");
        }
        let args = {};
        args.doctorID = params.DoctorID;
        DoctorService.getDoctorByID(args).then(doctorResponse => {
          HospitalService.getHospitalListByDoctor(args).then(
            hospitalResponse => {
              doctorResponse.Data.hospitalList = hospitalResponse.Data;
              this.local$.removeItem("tdUser");
              this.local$.setItem(
                "tdUser",
                JSON.stringify(doctorResponse.Data)
              );
              this.indicator$.close();
            }
          );
        });
      });
    }
  }
};
</script>

